<template>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            :immediate-check="false"
            @load="onLoad"
        >
            <Banner :list="banner.list" />
            <Category :list="categoryList.list" />
            <Goods :list="goodsList" />
        </van-list>
    </van-pull-refresh>
</template>

<script lang="ts">
import { defineComponent, defineAsyncComponent } from "vue";

import bannerHook from "./hooks/banner";
import categoryHook from "./hooks/category";
import listHook from "./hooks/list";

export default defineComponent({
    components: {
        Banner: defineAsyncComponent(() => import("./components/Banner.vue")),
        Category: defineAsyncComponent(() =>
            import("./components/Category.vue")
        ),
        Goods: defineAsyncComponent(() => import("./components/Goods.vue"))
    },
    setup() {
        const { getBannerImg, banner } = bannerHook();
        const { getRategory, categoryList } = categoryHook();
        const {
            requestGoodsList,
            goodsList,
            refreshing,
            pageNo,
            pageSize,
            finished,
            onRefresh,
            onLoad,
            loading
        } = listHook();
        getBannerImg();
        getRategory();
        requestGoodsList();
        return {
            banner,
            categoryList,
            goodsList,
            refreshing,
            pageNo,
            pageSize,
            finished,
            onRefresh,
            onLoad,
            loading,
        };
    }
});
</script>

<style lang="scss" scoped></style>
